import { Link } from 'react-router-dom'

const Menuer = () => {
	const listData = [{
		title: 'react 学习笔记 hooks',
		children: [{
			title: 'hooks 生命周期',
			href: '/NoteA/NoteA01',
		},{
			title: 'hooks 渲染优化1',
			href: '/NoteA/NoteA03',
		},{
			title: 'hooks 高阶组件',
			href: '/NoteA/NoteA04',
		},{
			title: 'hooks 子父通信',
			href: '/NoteA/NoteA02',
		},{
			title: 'hooks 多组件通信',
			href: '/NoteA/NoteA05',
		}],
	},{
		title: '实列群',
		children: [{
			title: '用户列表1',
			href: '/ExampleList1',
		},{
			title: '用户列表2',
			href: '/ExampleList2',
		}],
	},{
		title: 'css3 动画',
		children: [{
			title: '正方体',
			href: '/Css3A/Css3A01',
		},{
			title: '2D Transitions',
			href: '/Css3A/Css3A02',
		},{
			title: 'Background Transitions',
			href: '/Css3A/Css3A03',
		},{
			title: 'CSS linear-gradient() 函数',
			href: '/Css3A/Css3A04',
		},{
			title: 'CSS radial-gradient() 函数',
			href: '/Css3A/Css3A05',
		}],
	}];
	return (
		<ul className="ygbh-menu">
			{listData.map((item1) => {
				return (<li className="group-item" key={item1.title}>
					<div className="group-item-title">{item1.title}</div>
					<ul className="group-hash-list">
						{item1.children.map((item2) => {
							return (<li className="group-hash-item" key={item2.title}>
								<Link to={item2.href}>{item2.title}</Link>
							</li>);
						})}
					</ul>
				</li>);
			})}
		</ul>
	);
};

export default Menuer;
